<template>
  <div id="bigDiv">
    <head-2 />
    <div id="bigTitle">就爱解方程</div>
    <div id="countDown">
      倒计时<span id="timeNumber">{{ countDwon }}</span>s
    </div>
    <beginView
      :textInfo="this.textInfo"
      @isOpen="getOpen"
      v-if="this.isOpend==1"
    />
    <div id="contentDiv">
      <div class="contenTittle">题目：</div>
      <div class="number1"> {{ this.number1 + "x" + this.fuhao + this.number4 + "=" + this.total }} </div>
      <div class="contenTittle">答案：</div>
      <input type="text" name="" class="number2" placeholder="请输入答案：" id="inputAnser">
    </div>
    <div @click="isPass" id="tijiao">提交</div>
    <GetScore :userScore="this.userScore" v-if="this.isOpend==4" @onceTime="getOpenOnce"/>
  </div>
</template>
  
<script>
import head2 from '@/components/Head/head2.vue'
import BeginView from '@/components/beginView/beginView.vue';
import GetScore from '@/components/getScore/getScore.vue';
export default {
  components: { head2,BeginView, GetScore  },
  data() {
    return {
      countDwon: 30,
      number1: 0,
      number3: 0,
      number4: 0,
      total: 0,
      fuhao: '',
      countDwon: 30,
      whiteNumber:0,
      readNumber:"",
      countDwon: 10,
      isOpend: 1,
      isEnd: false,
      textInfo: {
        val: "游戏开始了，加油小朋友",
        textTitlle: "比一比的玩法介绍",
        textContant:
          "小朋友，每次游戏你都有10秒钟的时间进行游戏，加油！！",
      },
      userScore: {
        score: 0,
        allCount: 14,
        rightCount: 0,
        falseCount: 0,
        rightRate: 0,
        echartId:"compareCount"+new Date()
      },
    }
  },
  mounted() {
    //   this.contDwon()
    this.getNuber()
  },
  watch:{
    isOpend(){
      this.contDwon()
    }
  },
  methods: {
    computedRes(){
      this.countDwon=1
      this.isOpend=4
      this.isEnd = !this.isEnd;
    },
    getRes(){
      this.isOpend=4
    },
    getOpen(val) {
      this.isOpend = val;
    },
    getOpenOnce(val){
      this.isOpend = val;
      this.countDwon=10;
      this.userScore.allCount=0
      this.userScore.rightCount=0
      this.userScore.falseCount=0
      this.userScore.rightRate=0
    },
    contDwon() {
      const timer = setInterval(() => {
        this.countDwon--;
        if (this.countDwon <= 0) {
          // this.userScore.rightRate=this.userScore.rightCount/this.userScore.allCount
          clearInterval(timer);
          this.isOpend=4
          this.isEnd = !this.isEnd;
          // this.isEnd = !this.isEnd;
        }
      }, 1000);
    },
    getNuber() {
      this.number1 = Math.floor(Math.random() * 20) + 1
      var number2 = Math.floor(Math.random() * 2)
      this.number3 = Math.floor(Math.random() * 10) + 1
      this.number4 = Math.floor(Math.random() * 10) + 1
      if (number2 == 0) {
        this.fuhao = "+"
        this.total = this.number1 * this.number3 + this.number4
      }
      else {
        this.fuhao = "-"
        this.total = this.number1 * this.number3 - this.number4
      }
    },
    tijao() {
      this.getNuber()
    },
    isPass(){
      const useAnser=document.getElementById("inputAnser")
      if(useAnser.value==this.number3){
        this.userScore.rightCount++
      }
      else{
        this.userScore.falseCount++
      }
      this.userScore.allCount=this.userScore.rightCount+this.userScore.falseCount
      this.userScore.rightRate=this.userScore.rightCount/this.userScore.allCount
      this.getNuber()
    }
  }
}
</script>
  
<style lang="less" scoped>
#bigDiv {
  height: 100vh;
  .number1{
    background-color: rgb(245, 249, 248);
    height: 5vh;
    line-height: 5vh;
    text-indent: 20px;
    font-size: 17px;
  }
  .number2{
    background-color: rgb(205, 234, 234);
    width: 82vw;
    margin-left: 3vw;
    height: 5vh;
    line-height: 5vh;
    text-indent: 10px;
    border: none;
    font-size: 17px;
  }
  #countDown {
    font-size: 18px;
    font-weight: bold;
    margin-top: 30px;
    letter-spacing: 2px;

    #timeNumber {
      color: red;
    }
  }

  .contenTittle {
    font-size: 20px;
    font-weight: bold;
  }

  #bigTitle {
    font-weight: bold;
    font-size: 22px;
    margin-top: 20px;
    letter-spacing: 3px;
  }

  #tijiao {
    font-weight: bold;
    font-size: 20px;
    background-color: rgb(233, 130, 130);
    width: 20vw;
    margin: -17vh auto;
    border-radius: 5px;
  }

  #contentDiv {
    height: 40vh;
    width: 90vw;
    margin: 10vh auto;
    text-align: left;
    font-size: 18px;
    div{
    margin: 3vw;
  }
  }
}</style>